<template>
  <div class="view-main" v-loading="loading">
    <div class="view-main-header">
      <h2 class="view-main-title">专业</h2>
      <el-button class="main-title-back" type="primary" @click="addMajor('add')">新增专业</el-button>
      <el-input clearable placeholder="请输入要搜索的专业名称" v-model="majorSearchName" class="input-with-select">
        <template #append>
          <el-button class="input-with-button" @click="searchSchool">搜索</el-button>
        </template>
      </el-input>
      <router-link class="main-title-back" :to="{path: '/faculty', query: {
        id:state.queryInfo.id,  // 学校ID
        departments_id:state.queryInfo.departments_id,  //学院ID
        areas_id:state.queryInfo.areas_id,
        logo:state.queryInfo.logo,
        name:state.queryInfo.name,
        name_zh:state.queryInfo.name_zh,
        qs:state.queryInfo.qs,}}">
        <el-button>返回上一级</el-button>
      </router-link>
    </div>
    <div class="view-main-table">
      <el-table :max-height='state.posheight' v-if="state.listData.length > 0" :data="state.listData" border>
        <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
        <el-table-column label="专业名称" show-overflow-tooltip align="center">
          <template #default="scope">{{ scope.row.name_zh }}</template>
        </el-table-column>
        <el-table-column label="专业英文名称" show-overflow-tooltip align="center">
          <template #default="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column label="类型" width="160" show-overflow-tooltip align="center">
          <template #default="scope">{{ scope.row.is_postgraduate === 1 ? '硕士' : '本科'}}</template>
        </el-table-column>
        <el-table-column label="GPA设置" width="160" show-overflow-tooltip align="center">
          <template #default="scope">{{ scope.row.domestic_colleges.length > 0 ? '已设置' : '-'}}</template>
        </el-table-column>
        <el-table-column label="是否启用" width="160" show-overflow-tooltip align="center">
          <template #default="scope">
            <el-switch :before-change="() => onBeforeChange(scope.row)" v-model="scope.row.status" :disabled="!scope.row.parent_status" :active-value="1" :inactive-value="0" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"></el-switch>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="320" show-overflow-tooltip align="center">
          <template #default="scope">
            <el-button v-if="scope.row.can_set_gpa === 1" @click.prevent="editGPA(scope.row)" type="success" size="small">接收的国内大学</el-button>
            <el-button @click.prevent="addMajor('update',scope.row)" type="primary" size="small">专业修改</el-button>
            <el-button @click.prevent="details(scope.row)" type="warning" size="small">课程详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-else class="right-view-nodata">
        <img src="@/assets/img/no-data.png" alt="">
        <div>暂无数据</div>
      </div>
    </div>
    <!-- 新增修改专业 -->
    <el-dialog
      width="55%"
      :title="titleName + '专业数据'"
      :close-on-click-modal="false"
      v-model="majorVisible">
      <addMajorView  v-if="majorVisible" :parmas="{itemInfo:state.itemInfo,type:clickStatus}" @closeAddSchool="closeAddSchool"></addMajorView>
    </el-dialog>
    <!-- 接收国内的大学 -->
    <el-dialog
      width="50%"
      title="接收国内的大学"
      :close-on-click-modal="false"
      v-model="state.showGpaVisible">
      <majorGPAupload v-if="state.showGpaVisible" :parmas="{itemInfo:state.itemInfo,}" @closeCPAupload="closeCPAupload"></majorGPAupload>
    </el-dialog>
  </div>
</template>

<script setup>
  import { useRoute ,useRouter} from "vue-router";
  const route = useRoute()
  const router = useRouter()
  import { ref,reactive,onMounted,watch} from 'vue';
  import { ElMessage ,ElMessageBox } from 'element-plus';
  import API from "@/utils/api";
  import addMajorView from "../schoolComponents/add-major";
  import majorGPAupload from "../schoolComponents/majorGPAupload.vue";
  let state = reactive({
    queryInfo:route.query,
    listData:[],
    itemInfo:{},
    h: document.body.clientHeight,
    posheight: 100,
    timer: false,
    showGpaVisible:false,
  })
  watch(() => state.h, (newValue, oldValue) => {
    if(!state.timer) {
      state.posheight = newValue - 130
      state.timer = true
      setTimeout(function (){
        state.timer = false
      },400)
    }
  })
  function posTableHeight () {
    let h = document.body.clientHeight,
    new_h = h - 130;
    state.posheight = new_h;
  }
  const editGPA = ((item) => {
    state.itemInfo = item
    state.showGpaVisible = !state.showGpaVisible
  })
  const closeCPAupload = ((type) => {
    state.showGpaVisible = !state.showGpaVisible
    getMajorList()
  })
  // console.log(state.queryInfo,'queryInfo');
  let majorVisible = ref(false)
  let loading = ref(false)
  let majorSearchName = ref('')
  let titleName = ref('新增')
  let clickStatus = ref('')
  let operationStatus = ref(localStorage.getItem('operationStatus'))
  const searchSchool = (() =>{
    getMajorList()
  })
  const addMajor = ((type,item) =>{
    clickStatus.value = type
    majorVisible.value = true
    if(type === 'add') {
      titleName.value = '新增'
      state.itemInfo = {
        departments_id:route.query.departments_id,
        areas_id:Number(route.query.areas_id),
        colleges_id:Number(route.query.id),
      }
    }else {
      titleName.value = '修改'
      state.itemInfo = item
    }
  })
  // 获取学院数据
  function getMajorList () {
    loading.value = true
    API.majorList.getMajorInfoList({
      departments_id:state.queryInfo.departments_id,
      name:majorSearchName.value,
    }, (res) => {
      loading.value = false
      if(res.code == 0) {
        state.listData = res.data
      }
    })
  }
  function closeAddSchool (type) {
    majorVisible.value = false
    if(type === 1) {
      getMajorList()
    }
  }
  function onBeforeChange (value, clickedData) {
    // console.log(value,'value');
    // if(value.status == 1) {
    //   return new Promise((resolve) => {
    //     // console.log(resolve,'resolve');
    //     ElMessageBox.confirm('此操作将禁用该专业下面所有的课程, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning',
    //     }).then(() => {
    //       API.majorList.isEnabledDegree({id:value.id}, (res) => {
    //         if(res.code == 0) {
    //           getMajorList()
    //           ElMessage({type: 'success',message: '操作成功!',});
    //         }
    //       })
    //       return resolve()
    //     }).catch(() => {
    //       ElMessage({type: 'info',message: '已取消操作',});
    //     });
    //   })
    // }else {
      return new Promise((resolve) => {
        API.majorList.isEnabledDegree({id:value.id}, (res) => {
          if(res.code == 0) {
            getMajorList()
            ElMessage({type: 'success',message: '操作成功!',});
          }
        })
        return resolve()
      })
    // }
  }
  const details  = ((item) => {
    router.push({path:'/lesson',query:{
        degrees_id:item.id,   //专业ID
        id:state.queryInfo.id,  // 学校ID
        departments_id:state.queryInfo.departments_id,  //学院ID
        areas_id:state.queryInfo.areas_id,
        logo:state.queryInfo.logo,
        name:state.queryInfo.name,
        name_zh:state.queryInfo.name_zh,
        qs:state.queryInfo.qs,}})
  })
  onMounted(() => {
    getMajorList()
    posTableHeight()
    window.onresize = () => {
      return (() => {
        let a = document.body.clientHeight
        state.h = a
      })()
    }
  })
</script>

<style lang="scss" scoped>
.view-main {
  padding: 0 20px 20px;
  position: relative;
  .view-main-header {
    display: flex;
    align-items: center;
    .main-title-back {
      margin-left: 20px;
    }
    .el-input-group {
      width: 30%;
      margin-left: 20px;
    }
    .input-with-button {
      color: #fff;
      background: #409eff;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
  .view-main-table {
    .right-view-nodata {
      margin-top: 160px;
    }
  }
}
</style>